<!DOCTYPE html>

<html>
<head>
  <title>Grocery To Do List</title>
  <meta charset="UTF-8">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  <style type="text/css" media="screen">
    .main{
      padding: 80px 15px;
    }

    h1 {
      color: #e74c3c;
    }

    .navbar {
      background: #fa6374;
    }

    .navbar-inverse .navbar-brand {
      color: #fff;
    }

    .form-control {
      padding: 0 12px;
    }

    /*reset Twitter Bootstrap*/
    @media screen {
      * {
        -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
        box-sizing: content-box !important;
      }
    }

    .container a img {
      width: 135px;
      height: 34px;
    }

  </style>

</head>
  <body>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <a class="navbar-brand pull-left" href="#">Grocery To Do List</a>
        <a href="#" class="navbar-btn pull-right" onclick="TogetherJS(this); return false;"><img src="/images/start-togetherjs-blue.png"></a>
      </div>
    </div>


    <div class="container">

      <div class="main">

        <div class="row">
          <div id="form" class="navbar-form pull-left">
            <input id="description" name="description" type="text" class="form-control" style="width: 200px;" placeholder="Add a grocery item" />
            <input id="add" type="submit" value="Add" class="btn btn-primary" />
            <button id="clear" type="button" class="btn btn-danger">Clear All</button>
          </div>
        </div>

        <div class="row">
          <div id="alert"></div>
          <h4>Our groceries:</h4>
          <ul id="todos" class="list-group"></ul>
        </div>

      </div>

    </div>

    <!-- togetherjs -->
    <script>
      TogetherJSConfig_findRoom = {prefix: "togetherjstodo", max: 5};
      TogetherJSConfig_autoStart = true;
      TogetherJSConfig_suppressJoinConfirmation = true;
      TogetherJSConfig_storagePrefix = "tjs_todo";
    </script>
    <script src="/togetherjs.js"></script>

    <!-- JavaScript plugins (requires jQuery) -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="js/app.js"></script>

  </body>
</html>
